<template>
  <div >
    <ScreenAdapter>
     <div class="bottom">
       <div class="box1" v-for="item in showdata" key="item.name">
         <div class="box1-top">
           <img src="../../assets/images/组%2022.png">
           <span>{{item.name}}</span>
           <text>分享</text>
         </div>
         <div class="box1-bottom">
           <div>
             <text>{{item.value1}}</text>
             <span>企业数</span>
           </div>
           <div>
             <text>
               {{item.value2}}
               <span class="smaller">亿kw·h</span>
             </text>
             <span>用电总量</span>
           </div>
           <div>
             <text>
               <img src="../../assets/images/down.png">
               {{item.value3}}</text>
             <span>同比增长</span>
           </div>
           <div>
             <text>
               <img src="../../assets/images/up.png">
               {{item.value4}}</text>
             <span>环比增长</span>
           </div>
         </div>
       </div>
       <div class="box3">
         <div class="add"  @click="showModal" >
           <img src="../../assets/images/+.png">
           <text>添加行业看板</text>
         </div>
       </div>
      </div>
      <div class="ant-modal" ref="refModel">
        <a-modal
            v-model:visible="visible"
            title="自定义行业"
            width=906px
            style="top: 176px"
            mask-closable
            :getContainer="() => $refs.refModel"
        >
          <div class="body">
            <div class="top">
              <div class="top-box">
                <span>我的行业</span>
                <span>编辑</span>
              </div>
              <div class="tag" >
                <div v-for="item in showdata" :key="item.name">
                  <a-tooltip v-if="item.name.length > 3" :title="item.name">
                    <a-tag :closable="index !== 0" @close="handleClose(item.name)">
                      {{ `${item.name.slice(0, 3)}...` }}
                    </a-tag>
                  </a-tooltip>
                  <a-tag v-else :closable="index !== 0" @close="handleClose(item.name)" >
                    {{ item.name }}
                  </a-tag>
                  <a-input
                      v-if="state.inputVisible"
                      ref="inputRef"
                      v-model:value="state.inputValue"
                      type="text"
                      size="small"
                      :style="{ width: '78px' }"
                      @blur="handleInputConfirm"
                      @keyup.enter="handleInputConfirm"
                  />
<!--                  <a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">-->
<!--                    <plus-outlined />-->
<!--                    New Tag-->
<!--                  </a-tag>-->
                </div>
              </div>
            </div>
              <a-select
                  v-model:value="value"
                  mode="tags"
                  style="width: 100%"
                  placeholder=""
                  :options="options"
                  @change="handleChange"
              ></a-select>
            <div class="box">
              <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane key="1" tab="行业大类">
                  <div class="warehouse">
                    <div class="coin" v-for="item in data1" :key="item.name" @click="addItem(item)">
                      <img src="../../assets/images/add.png">
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </a-tab-pane>
<!--                force-render-->
                <a-tab-pane key="2" tab="行业中类" >
                  <div class="warehouse">
                    <div class="coin" v-for="item in data2" :key="item.name" @click="addItem(item)">
                      <img src="../../assets/images/add.png">
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </a-tab-pane>
                <a-tab-pane key="3" tab="行业小类">
                  <div class="warehouse">
                    <div class="coin" v-for="item in data3" :key="item.name" @click="addItem(item)">
                      <img src="../../assets/images/add.png">
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </a-tab-pane>
                <a-tab-pane key="4" tab="自定义">
                  <div class="warehouse">
                    <div class="coin" v-for="item in data4" :key="item.name" @click="addItem(item)">
                      <img src="../../assets/images/add.png">
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </a-tab-pane>
              </a-tabs>
            </div>
          </div>
          <template #footer></template>
        </a-modal>
      </div>
    </ScreenAdapter>
  </div>
</template>


<script setup lang="ts">
import {nextTick, reactive, Ref, ref} from 'vue';
import { Modal } from 'ant-design-vue';
import ScreenAdapter from "../../components/ScreenAdapter.vue";

const showModal = () => {
  visible.value = true;
  console.log(visible.value)
};
const hideModal = () => {
  visible.value = false;
};
const data1 = ref([
  {
    name: '新能源',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '没时间',
    value1: 2,
    value2: 3,
    value3: 4,
    value4: 312,
  },
  {
    name: '能源',
    value1: 3,
    value2: 4,
    value3: 5,
    value4: 312,
  },
  {
    name: '不好看',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '我当时',
    value1: 2,
    value2: 3,
    value3: 4,
    value4: 312,
  },
  {
    name: '星巴克',
    value1: 3,
    value2: 4,
    value3: 5,
    value4: 312,
  },
  {
    name: '欧克吧',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '西欧四',
    value1: 2,
    value2: 3,
    value3: 4,
    value4: 312,
  },
  {
    name: '马甲的',
    value1: 3,
    value2: 4,
    value3: 5,
    value4: 312,
  },
])
const data2 = ref([
  {
    name: '新能源2',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '没时间2',
    value1: 2,
    value2: 3,
    value3: 4,
    value4: 312,
  },
  {
    name: '能源2',
    value1: 3,
    value2: 4,
    value3: 5,
    value4: 312,
  },
  {
    name: '不好看2',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '我当时2',
    value1: 2,
    value2: 3,
    value3: 4,
    value4: 312,
  },
  {
    name: '星巴克2',
    value1: 3,
    value2: 4,
    value3: 5,
    value4: 312,
  },
  {
    name: '欧克吧2',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '西欧四2',
    value1: 2,
    value2: 3,
    value3: 4,
    value4: 312,
  },
  {
    name: '马甲的2',
    value1: 3,
    value2: 4,
    value3: 5,
    value4: 312,
  },
])
const data3 = ref([
  {
    name: '新能源3',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '没时间3',
    value1: 2,
    value2: 3,
    value3: 4,
    value4: 312,
  },
  {
    name: '能源3',
    value1: 3,
    value2: 4,
    value3: 5,
    value4: 312,
  },
  {
    name: '不好看3',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '我当时3',
    value1: 2,
    value2: 3,
    value3: 4,
    value4: 312,
  },
  {
    name: '星巴克3',
    value1: 3,
    value2: 4,
    value3: 5,
    value4: 312,
  },
  {
    name: '欧克吧3',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '西欧四3',
    value1: 2,
    value2: 3,
    value3: 4,
    value4: 312,
  },
  {
    name: '马甲的3',
    value1: 3,
    value2: 4,
    value3: 5,
    value4: 312,
  },
])
const data4 = ref([
  {
    name: '新能源4',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '不好看4',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '我当时4',
    value1: 2,
    value2: 3,
    value3: 4,
    value4: 312,
  },
  {
    name: '星巴克4',
    value1: 3,
    value2: 4,
    value3: 5,
    value4: 312,
  },
  {
    name: '欧克吧4',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '西欧四4',
    value1: 2,
    value2: 3,
    value3: 4,
    value4: 312,
  },
  {
    name: '马甲的4',
    value1: 3,
    value2: 4,
    value3: 5,
    value4: 312,
  },
])
const showdata: Ref<object[]> = ref([
  {
    name: '新能源564646',
    value1: 1,
    value2: 2,
    value3: 3,
    value4: 312,
  },
  {
    name: '我当时',
    value1: 2,
    value2: 3,
    value3: 4,
    value4: 312,
  },
  {
    name: '星巴克',
    value1: 3,
    value2: 4,
    value3: 5,
    value4: 312,
  },
])
const visible = ref(false);
const activeKey = ref('1');
//编辑按钮

//搜索
const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};
//搜索框获取数据
const value = ref([])
const options: { value: string }[] = [
  ...data1.value.map((item: { name: string }) => ({ value: item.name })),
  ...data2.value.map((item: { name: string }) => ({ value: item.name })),
  ...data3.value.map((item: { name: string }) => ({ value: item.name })),
  ...data4.value.map((item: { name: string }) => ({ value: item.name }))
];
//添加数据到showdata
const addItem = (item: any) => {
  // 判断 showdata.value 中是否已存在相同数据
  if (!showdata.value.includes(item)) {
    showdata.value.push(item);
  } else {
    // 如果已存在相同数据，则提示用户不能添加重复数据
    console.log("不能添加重复数据");
  }
};
//
const inputRef = ref();
const state = reactive({
  tags: ['Unremovable', 'Tag 2', 'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'],
  inputVisible: false,
  inputValue: '',
});
//关闭展示的标签数据
const handleClose = (removedTag: string) => {
  const tags = state.tags.filter(tag => tag !== removedTag);
  console.log(tags);
  state.tags = tags;
  showdata.value = showdata.value.filter(item => item.name !== removedTag);
};

const showInput = () => {
  state.inputVisible = true;
  nextTick(() => {
    inputRef.value.focus();
  });
};

const handleInputConfirm = () => {
  const inputValue = state.inputValue;
  let tags = state.tags;
  if (inputValue && tags.indexOf(inputValue) === -1) {
    tags = [...tags, inputValue];
  }
  console.log(tags);
  Object.assign(state, {
    tags,
    inputVisible: false,
    inputValue: '',
  });
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/mixins.scss";
.bottom{
  border: 1px solid red;
  @include wh(1300px,440px);
  margin: 300px 0 36px 263px;
  background-color: #F6F8FE;
  display: grid;
  overflow: auto;
  grid-template-columns: repeat(2, 578px);
  grid-template-rows:179px;
  gap: 30px 50px;
  .box1{
    @include wh(578px,179px);
    border: 1px solid red;
    background-color: #fff;
    margin-left: 30px;
    display: flex;
    flex-direction: column;
    .box1-top{
      @include wh(578px,60px);
      display: flex;
      border: 1px solid red;
      align-items: center;
      img:nth-child(1){
        @include wh(30px,30px);
        margin-left: 25px;
        //margin-top: 19px;
      }
      span:nth-child(2){
        @include wh(200px,67px);
        @include fontMixin(18px,bold,#2C3345);
        margin-left: 7px;
        line-height: 67px;
      }
      text:nth-child(3){
        @include wh(80px,67px);
        @include fontMixin(16px,bold,#999999);
        margin-left: auto;
        display: flex;
        align-items: center;
        &:before {
          content: "";
          display: inline-block;
         @include wh(16px,16px);
          background-image: url('../../assets/images/share.png'); /* 图片路径 */
          background-size: cover; /* 调整背景图片大小以适应元素大小 */
          margin-right: 5px;
        }
      }
    }
    .box1-bottom{
      @include wh(578px,119px);
      display: grid;
      border: 1px solid red;
      grid-template-columns: auto 157px auto auto;

      > div {
        position: relative; /* 添加相对定位 */
        display: flex;
        flex-direction: column;
        &:after {
          content: "";
          position: absolute;
          top: 40px;
          right: 0;
          width: 1px;
          opacity: 0.2;
          height: 41px;
          background-color: #7FA0F9; /* 设置边线颜色为黑色 */
        }
        >text{
          display: block; /* 将文本元素转换为块级元素，使其独占一行 */
          text-align: center; /* 居中文本 */
          @include fontMixin(26px,bold,#7FA0F9);
          margin-top: 45px;
          transform: translateY(-50%);
          img:nth-child(1){
            margin-top: -5px;
          }
          .smaller{
            @include fontMixin(20px,400,#7FA0F9);
          }
        }
        > span {
          display: block; /* 将文本元素转换为块级元素，使其独占一行 */
          text-align: center; /* 居中文本 */
          @include fontMixin(14px,500,#999);
          //margin-top: 80px;
          transform: translateY(-80%);
        }
      }
    }
  }

  .box3{
    @include wh(578px,179px);
    border: 1px solid red;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 30px;

    .add{
      @include wh(479px,133px);
      border: 2px dashed #0A0407;
      opacity: 0.2;
      border-radius: 6px;
      display: flex;
      align-items: center;
      cursor: pointer;
      img:nth-child(1) {
        @include wh(48px, 48px);
        display: flex;
        filter: brightness(0.8);
        margin-left: 154px;
      }
      text:nth-child(2){
        margin-left: 16px;
        @include wh(108px,105px);
        @include fontMixin(18px,#808CA3,bold);
        font-family: PingFang SC;
        line-height: 105px;
      }

    }
  }
}

:deep(.ant-modal){
  .ant-modal-close {
    position: absolute;
    top: 27px;
    right: 8px;
    z-index: 10;
    padding: 0;
    color: rgba(0, 0, 0, 0.45);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color 0.3s;
    .ant-modal-close-icon > svg {
      width: 2em !important;
      height: 2em !important;

    }
  }

  .ant-modal-header {
    background-color: #F3F8FF;
    height: 92px;
    display: flex;
    align-items: center;
    .ant-modal-title{
      @include fontMixin(30px,bold,#333333);
      line-height: 67px;
    }
  }
  .body{
    border: 1px solid red;
    height: 640px;
    display: flex;
    flex-direction: column;
    .top{
      @include wh(857px,160px);
      border: 1px solid red;
      display: flex;
      flex-direction: column;
      .top-box{
        @include wh(857px,80px);
        display: flex;
        justify-items: center;
        span:nth-child(1){
          @include fontMixin(24px,bold,#333);
          margin-left: 21px;
          margin-top: 16px;
        }
        span:nth-child(2){
          @include wh(57px,23px);
          margin-top: 26px;
          margin-left: auto;
          margin-right: 37px;
          text-align: center;
          background-color: #E3EBFF;
          border-radius: 4px;
          cursor: pointer;
        }
      }
      .tag{
        @include wh(857px,80px);
        border: 1px solid red;
        display: grid;
        grid-template-columns: repeat(6, 120px);
        overflow: auto;
        grid-template-rows:26px;
        gap: 20px;
        div{
          @include wh(120px,32px);
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          .ant-tag {
            @include wh(120px,32px);
            padding: 17px 7px;
            font-size: 18px;
            display: flex;
            align-items: center;
          }
          .ant-tag-close-icon {
            margin-left: 30px;
            color: rgba(0, 0, 0, 0.45);
            font-size: 10px;
            cursor: pointer;
            transition: all 0.3s;
          }
        }
      }
    }
    .ant-select-selection-overflow {
      position: relative;
      display: flex;
      flex: auto;
      height: 30px;
      flex-wrap: wrap;
      max-width: 100%;
      background-color: #F3F6FD;
    }
    .ant-select-multiple .ant-select-selector {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 20px;
    }
    .box{
      border: 1px solid red;
      @include wh(857px,400px);
      .ant-tabs-nav .ant-tabs-tab {
        @include fontMixin(24px,bold,#999);
      }
      .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
        color: #2C3345;
        text-shadow: 0 0 0.25px currentcolor;
      }
      .warehouse{
        border: 1px solid red;
        @include wh(857px,300px);
        display: grid;
        grid-template-columns: repeat(6, 120px);
        overflow: auto;
        grid-template-rows:32px;
        gap: 20px;
        .coin{
          @include wh(120px,32px);
          display: flex;
          background-color: #F5F5F5;
          justify-items: center;
          align-items: center;
          img:nth-child(1){
            @include wh(14px,14px);
            top: 0;
            margin-left:14px;
            cursor: pointer;
          }
          span:nth-child(2){
            @include wh(80px,17px);
            @include fontMixin(18px,500,#666);
            display: flex;
            margin-left: 16px;
            align-items: center;
          }
        }
      }
    }
  }
}


</style>